<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-03-09 15:04:30"
-->
<template>
  <v-dialog overlay-opacity="0.9" overlay-color="white" v-model="dialog" persistent>
    <template v-slot:activator="{ on }">
      <v-hover v-slot:default="{ hover }">
      <v-card>
        <v-card-title v-if="label !== ''">{{label}}</v-card-title>
        <v-img :src="media.fileurl" :aspect-ratio="16/9" height="200" >
          <v-expand-transition>
            <div
              v-if="media.fileurl && hover"
              class="d-flex transition-fast-in-fast-out orange darken-2 v-card--reveal display-3 white--text"
              style="height: 30%;">
              <v-btn icon large class="v-card-hover-btn mx-3" color="secondary" @click="itemPreviewHandle"><v-icon x-large>zoom_in</v-icon></v-btn>
            </div>
          </v-expand-transition>
        </v-img>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" block text  v-on="on">
            <template v-if="media.fileurl">
              <v-icon>autorenew</v-icon>重新选择
            </template>
            <template v-else>
              <v-icon>add</v-icon>选择素材
            </template>
          </v-btn>
        </v-card-actions>
      </v-card>
      </v-hover>
    </template>
    <MaterialList :type="type" :value="media" v-on:input="inputHandle">
      <v-btn @click="dialog = false" text><v-icon>close</v-icon>取消</v-btn>
    </MaterialList>
  </v-dialog>
</template>
<script>
import MaterialList from './MaterialList.vue'
export default {
  name: 'MaterialSelect',
  components: { MaterialList },
  props: {
    label: {
      type: String,
      default: '封面'
    },
    type: String,
    // value: String,
    fileurl: String,
    thumb_media_id: String
    // returnType: {
    //   type: String,
    //   default: 'object',
    //   validator: function (value) {
    //     // 这个值必须匹配下列字符串中的一个
    //     return [ 'media_id', 'url', 'object' ].indexOf(value) !== -1
    //   }
    // }
  },
  data: function () {
    return {
      media: {},
      dialog: false
    }
  },
  created: function () {
  },
  computed: {},
  methods: {
    itemPreviewHandle() {
      this.$imagePreview([{ src: this.media.fileurl }])
    },
    inputHandle(item) {
      this.media = item
      if (item !== null) {
        this.$emit('update:fileurl', item.fileurl)
        this.$emit('update:thumb_media_id', item.media_id)
        this.dialog = false
      }
    }
  }
}
</script>
<style scoped>
</style>
